<template>
	<view class="ca">
		<!-- camera.wxml -->
		<view class="peo">
		</view>
		<camera device-position="front" flash="off" binderror="error" :style="{height: phoneheigtht+'px'}"></camera>
		<view class="text">
			请正对屏幕进行人脸验证
		</view>
<!-- 		<view class="facebutton" type="primary" @click="takePhoto">
			<uni-icons size="40" type="camera"></uni-icons>
		</view> -->

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {

		data() {
			return {
				src: "", //图片的链接
				base64: "",
				msg: "",
				// 设备窗口高度
				phoneheigtht: 0,
			};
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.phoneheigtht = sysInfo.windowHeight
		},
		onShow() {
			let that = this
			that.auto = setInterval(() => this.takePhoto(), 2000);
		},
		onHide(){
			clearInterval(this.auto)
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken','updateFaceid']),
			takePhoto() {
				var that = this;
				const ctx = wx.createCameraContext()
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						that.src = res.tempImagePath
						//将获取的图片转码为base64
						uni.getFileSystemManager().readFile({
							filePath: that.src, //图片返回路径
							encoding: 'base64', //格式
							success: (res) => {
								that.base64 = res.data
								this.login()
							}
						})
					} //拍照结束
				}) //调用相机结束
			},
			login() {
				uni.request({
					url: 'http://81.68.103.193:3000/api/facelogin',
					method: 'POST',
					data: {
						image: this.base64
					},
					success: (loginResult) => {
						console.log(loginResult)
						if (loginResult.data.meta.status !== 200) return uni.$showMsg('比对不通过，请重试！')
						clearInterval(this.auto)
						uni.$showMsg('登录成功！')
						this.updateToken(loginResult.data.meta.token)
						this.updateUserInfo(loginResult.data.data)
						uni.switchTab({
							url: '/pages/my/my',
						})
					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.ca {
		display: flex;
		justify-content: center;
		// .peo{
		// 	position: fixed;
		// 	top:0;
		// 	left:0;
		// 	z-index:998;
		// 	width:100%;
		// 	height:100%;
		// 	background:  url() rgba(0,0,0,0.5) ;
		// }
		.facebutton {
			position: fixed;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			bottom: 50px;
			background: rgba($color: #ffffff, $alpha: 0.6);

			&:active {
				background: rgba($color: #ffffff, $alpha: 0.2);
			}
		}

		.text {
			position: fixed;
			// z-index: 999;
			top: 70px;
			font-size: 18px;
			color: #FFFFFF;
		}
	}
</style>
